<template>
	<div class="select-filter" v-show="showBlock" @click="closeFilterBlockFunc">
		<div class="more more-block" @click.stop="">
	        <div class="selectName" @click="closeFilterBlockFunc">{{ title }}</div>
	        <div class="area-frame">
	            <ul class="areas">
	                <li @click="selectTypeIndex('')" :class="{selectLi : filterDataKey == ''}">不限</li>
	                <li :class="{selectLi : filterDataKey == index}" v-for="(item,index) in filterData" @click="selectTypeTag(index)">{{ index }}</li>
	            </ul>
	            <ul class="schools">
	                <template v-for="(item,index) in filterData[filterDataKey]">
	                    <li :class="{selectLi : queryId == item.campusId}" @click="selectTypeIndex(item,index)">{{ item.campusName }}</li>
	                </template>
	            </ul>
	        </div>
	    </div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				showBlock: false,
				filterDataKey: '',
			}
		},
		props:['title','filterData','queryId'],
		methods:{
			closeFilterBlockFunc(){
				document.querySelector(".more-block").classList.remove("on-more-width");
                document.querySelector(".more-block").classList.add("off-more-width");

                setTimeout(() => {
                    this.closeBlockFunc();
                }, 400);

                this.$emit('closeFilterBlockFunc');
			},
			selectTypeTag(index){
				this.$emit("selectTypeTag",index);
                this.filterDataKey = index;
			},
			getFilterDataKey(){
				let count = 1;
		        for(let key in this.filterData){
					if(count > 1) break;
					if(count == 1){
						this.filterDataKey = key;
					}
					count ++ ;
		        }
			},
			selectTypeIndex(item,index){
				this.$emit('selectTypeIndex',item,index);
				if (item == '') {  // 不限
                    this.filterDataKey = '';
                }
                this.closeFilterBlockFunc();
			},
			closeBlockFunc(){
				this.showBlock = false;
			},
		},
		computed:{
			filterDatas(val){
				return this.filterData
			},
		},
		watch:{
			filterDatas(val){
				this.getFilterDataKey();
			}
		},
	}
</script>
<style lang="less">
	.select-filter{
		width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1001;
		.more {
            width: 86.4%;
            height: 100%;
            background: #fafafa;
            position: fixed;
            right: 0;
            bottom: 0;
            transform: scaleX(0);
            -webkit-transform-origin: top right;
            transition: transform .3s;
        }
        .on-more-width {
        	transform: scaleX(1);
            // animation: moreScale .3s forwards;
            // -webkit-animation: moreScale .3s forwards;
        }
        .off-more-width {
        	transform: scaleX(0);
            // animation: moreScaleOff .3s forwards;
            // -webkit-animation: moreScaleOff .3s forwards;
        }
        @keyframes moreScale {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }
        @-webkit-keyframes moreScale {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }
        @-o-keyframes moreScale {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }
        @-moz-keyframes moreScale {
            0% {
                transform: scaleX(0);
            }
            100% {
                transform: scaleX(1);
            }
        }
        @keyframes moreScaleOff {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }
        @-webkit-keyframes moreScaleOff {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }
        @-o-keyframes moreScaleOff {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }
        @-moz-keyframes moreScaleOff {
            0% {
                transform: scaleX(1);
            }
            100% {
                transform: scaleX(0);
            }
        }	        
        .selectName {
            height: 110px;
            line-height: 110px;
            color: #1c1b1f;
            text-align: center;
            padding-left: 15px;
            border-bottom: 1px solid #e8e8e8;
            font-size: 36px;
            background: #fff;
            &:before {
                content: '';
                width: 18px;
                height: 30px;
                background: url(../assets/img/arrLeft.png) no-repeat;
                margin-top: 40px;
                background-size: 100% 100%; 
                float: left;
            }
        }
        .area-frame{
            height: 100%;
            overflow:auto;
            .areas {
                width: 32%;
                height: 100%;
                background: #fafafa;
                overflow-y: auto;
                font-size: 32px;
                color: #1c1b20;
                float:left;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            .schools {
                float:right;
                width:68%;
                height: 100%;
                overflow-y: auto;
                background: #fff;
                color: #333;
                font-size: 28px;
            }
            li {
                line-height: 114px;
                text-align: center;
            }
            .selectLi {
                color: #3271f1;
            }
        }
	}
</style>